import React from 'react'
import { View, ActivityIndicator } from 'react-native'
import { Overlay } from "../script/_teaset"
import { Label, Touch, Oview } from "./Component"
import { Color, Lt, Jx, Jpp } from "./Jx"

class Content extends React.PureComponent{
    render(){
        const {children} = this.props;
        return <Oview.MsgUp style={{padding:20, width:"80%", alignSelf:"center"}}>
            <Label style={{ fontSize: Lt.c16, color: "black", textAlign:"center" }}>{children}</Label>
        </Oview.MsgUp>
    }
}
class Button extends React.PureComponent{
    render(){
        let {style, fontColor, title, ...other} = this.props;
        if(!fontColor){
            fontColor = "black";
        }
        return <Touch style = {{
            flex: 1, 
            justifyContent: "center",
            alignItems: "center",
            ...style,
        }} {...other}>
            <Label style={{ fontSize: Lt.c18, color:fontColor }}>{title}</Label>
        </Touch>
    }
}
// 弹框 指示框 转圈圈
export class Dialog{
    static refs = {};
    static toasts = {}

    static loading(text_model, modal) {
        this.hiding();
        if(!modal){
            if(Jx.isBoolean(text_model)){
                modal = text_model;
                text_model = null;
            }
        }
        if(!text_model){
            this.loadingView = Overlay.show(<Oview.View
                modal={modal || false}
                overlayOpacity={0}>
                <ActivityIndicator size={'large'} animating={true}/>
            </Oview.View>);
            return;
        }
        this.loadingView = Overlay.show(<Oview.View
            modal={modal || false}
            overlayOpacity={0}>
            <View style={{ backgroundColor: '#333', padding: Lt.pad, borderRadius: Lt.radius, alignItems: 'center' }}>
                <ActivityIndicator size={'large'} animating={true}/>
                <Label style={{ color: "#fff" }}>{text_model}</Label>
            </View>
        </Oview.View>);
    }

    static hiding(err) {
        if(this.loadingView){
            Overlay.hide(this.loadingView);
            this.loadingView = null;
        }
    }

    static _retainCount = 0;
    static retain(indicator){
        if((++this._retainCount) > 1){
            return;
        }
        this.retainView = Overlay.show(<Oview.View
            modal={true}
            overlayOpacity={0}>
            {
                indicator ? <ActivityIndicator size={'large'} animating={true}/> : null
            }
        </Oview.View>);
    }
    static release(){
        if((--this._retainCount) > 0){
            return;
        }
        this._retainCount = 0;
        if(this.retainView){
            Overlay.hide(this.retainView);
            this.retainView = null;
        }
    }

    static s_toast = 0;
    static s_toastButtom = 0;
    static toastTimer(key){
        if(this.toasts[key]){
            Overlay.hide(this.toasts[key]);
            delete this.toasts[key];
        }
        this.s_toast = 0;
        for(let k in this.toasts){
            ++this.s_toast;
        }
        if(this.s_toast == 0 || this.s_toast > ((Jpp.height-100) / 30)){
            this.s_toastButtom = 0;
        }        
    }

    static toast(text){
        let key = Overlay.show(<Oview.View
            style = {{justifyContent:"flex-end"}}
            overlayOpacity={0}
            overlayPointerEvents = {"none"}>
            <View style = {{
                backgroundColor:"black", 
                opacity : 0.8,
                borderRadius: 6, 
                paddingVertical:4,
                paddingHorizontal:10,
                bottom : (++this.s_toastButtom) * 30 + 60,
            }}>
                <Label style={{color:"white", }}>{Jx.stringify(text)}</Label>
            </View>
        </Oview.View>);
        this.toasts[key] = key;
        setTimeout(()=>{this.toastTimer(key)}, 2500);
    }

    static error(err){
        err && this.toast(err);
    }


    static close(text, cb, noClose){
        if(!noClose && this.refs[text]){
            // this.refs[text].close();
            Overlay.hide(this.refs[text]);
            delete this.refs[text];
        }
        cb && cb();
    }

    static msg2(text, cbOk, cbCancel, textOk, textCancel) {
        text = Jx.stringify(text);
        this.close(text);
        this.refs[text] = Overlay.show(<Oview.Msg modal={true}>
            <Content>{text}</Content>
            <View style={{ backgroundColor: Color.line, height: 1 }} />
            <View style={{ flexDirection: "row", height: Oview.btnHeight}}>
                <Button title = {textCancel || "取消"} fontColor={Color.c6} onPress = {()=>this.close(text, cbCancel)}/>
                <View style={{ width: 1, backgroundColor: Color.line, height: (Oview.btnHeight - Lt.margin * 2), alignSelf:"center" }} />
                <Button title = {textOk || "确定"} fontColor={Color.theme} onPress = {()=>this.close(text, cbOk)}/> 
            </View>
        </Oview.Msg>);
    }


    static msg1(text, cbOk, textOk, noClose) {
        text = Jx.stringify(text);
        this.close(text);
        this.refs[text] = Overlay.show(<Oview.Msg modal={true}>
            <Content>{text}</Content>
            <View style={{ backgroundColor: Color.line, height: 1 }} />
            <View style={{ flexDirection: "row", height: Oview.btnHeight}}>
                <Button title = {textOk || "确定"} fontColor={Color.theme} onPress = {()=>this.close(text, cbOk, noClose)}/>
            </View>
        </Oview.Msg>);
    }

    static msg(text) {
        text = Jx.stringify(text);
        Overlay.show(<Oview.Msg modal={false} style = {{justifyContent:"center"}}>
            <Content>{text}</Content>
        </Oview.Msg>);
    }
}